﻿@{
    ViewData["Title"] = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="#">机器人列表</a>
        <a>
            <cite></cite>
        </a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body " style="display: none;">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="keywords" placeholder="请输入机器人名称" autocomplete="off" class="layui-input">
                        </div>
                        <input type="hidden" id="queryjson" value=""/>
                        <div class="layui-inline layui-show-xs-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                            <tr>
                                <th width="70">序号</th>
                                <th>机器人名称</th>
                                <th width="100">版本</th>
                                <th width="100">状态</th>
                                <th width="100">操作</th>
</thead>
                        <tbody id="table1">

                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body ">
                    <div id="page"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var pi = 1, ps = 10;

    layui.use(['jquery', 'laydate', 'form', 'laypage', 'laytpl'], function () {
        $ = layui.jquery;
        var form = layui.form;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;

        form.on('submit(sreach)', function (data) {
            $('#queryjson').val(JSON.stringify(data.field));
            loadData(1, ps);
            return false;
        });

        function loadData(page, size) {
            try {
                var j = $('#queryjson').val();
                var d = {};
                if (j.length > 0) {
                    d = JSON.parse(j);
                }
                d.page = page;
                d.size = size;
                $.ajax({
                    type: "post",
                    data: d,
                    url: "/robot/list",
                    success: function (data) {
                        console.log(data);

                        var getTpl = list.innerHTML
                            , view = document.getElementById('table1');
                        laytpl(getTpl).render(data, function (html) {
                            view.innerHTML = html;
                        });

                        $('.layui-table .layui-btn').on('click', function () {
                            var arg = {};
                            arg.id = $(this).parents("tr").attr('data-id');
                            arg.event = $(this).attr('lay-event');
                            onTableEvent(arg);
                        });

                        laypage.render({
                            elem: 'page'
                            , count: data.count, limit: size, curr: page
                            , jump: function (obj, first) {
                                if (first) return;
                                loadData(obj.curr, 1);
                            }
                        });
                    },
                    error : function(e){
                        layer.open({
                            type: 1,
                            area: ['800px', '640px'],
                            title: '系统异常',
                            content: e.responseText //这里content是一个普通的String
                        });
                    }
                });
            }
            catch (e) {}
        }

        function onTableEvent(arg) {
            if (arg.event == 'mgrPackages') {
                xadmin.open('管理包', '/robot/packages?robotGuid=' + arg.id, 640, 480, true);
            }
        }

        loadData(pi, ps);
    });
</script>

<script id="list" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <tr data-id="{{ item.robotId }}">
        <td>{{ index+1 }}</td>
        <td>{{ item.name ?? "" }}</td>
        <td>{{ item.version ?? "" }}</td>
        <td>
            {{# if(item.status == 2){ }}
            <span class="layui-badge-dot layui-bg-green"></span>空闲
            {{# } else if(item.status==3){ }}
            <span class="layui-badge-dot layui-bg-orange"></span>执行
            {{# } else{ }}
            <span class="layui-badge-dot layui-bg-gray"></span>离线
            {{# } }}
        </td>
        <td><button class="layui-btn" lay-event="mgrPackages">管理包</button></td>
    </tr>
    {{#  }); }}
    {{#  if(d.data.length === 0){ }}
    <tr><td colspan="15">无数据...</td></tr>
    {{#  } }}
</script>